<template>
  <div class="index">
    <div class="wrap index-wrap">
      <div class="main">
        <ul class="main-title">
          <li v-for="(item,index)  of classles" :key="index" @click="checkClassles(index)">
            <span :class="{linkActive:index==linkFlag}">{{item}}</span>
          </li>
        </ul>
        <div class="mainItem-wrap" v-loading="!blogList.length" element-loading-text="加载中...">
          <div
            class="main-item"
            v-for="(item,index) of blogList.slice((currentPage-1)*PageSize,currentPage*PageSize)"
            :key="index"
          >
            <span class="img">
              <img :src="item.UHead" alt />
            </span>
            <div class="status">
              <span class="status-reply">{{item.TReplyCount}}</span>
              <span class="status-center">/</span>
              {{item.TClickCoount}}
            </div>
            <span
              class="classBtn"
              :class="{'classesBtn':index<3&&item.Ttop==1}"
            >{{classles[item.tsid]}}</span>
            <span
              class="classBtn"
              v-if="index<3&&item.Ttop==1"
              :class="{'classesBtn':index<3&&item.Ttop==1}"
            >置顶</span>
            <h3>
              <router-link
                :title="item.TTopic"
                :to="'/article/'+item.tid+'/'+item.TClickCoount"
                target="_blank"
                tag="a"
                class="topicTitle"
              >{{item.TTopic}}</router-link>
            </h3>
            <span class="img-mini">
              <img :src="item.Uhead" alt />
            </span>
            <span class="time">{{item.TLastReplayTime}}</span>
          </div>
        </div>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="PageSize"
          layout="total, prev, pager, next, jumper"
          :total="totalCount"
        >></el-pagination>
      </div>
      <div class="right-side">
        <div class="user-info" v-show="isLogin">
          <div class="main-title">个人信息</div>
          <div class="right-user Rside">
            <div class="userInfo">
              <div class="img">
                <img :src="user.uhead" alt="">
              </div>
              <span>{{user.uname}}</span>
            </div>
            <div class="score">积分：{{user.ipoint}}</div>
            <span>“ 这家伙很懒，什么个性签名都没有留下。 ”</span>
          </div>
        </div>
        <div class="sendBtn-wrap Rside">
          <div class="btn" @click="$router.push('/sendblog')">发布话题</div>
        </div>
        <div class="advisement Rside">
          <div class="advert">
            <img src="//static.cnodejs.org/FgIok2ZlDer2QOb8sJ20S9Y8T2Jq" alt />
          </div>
          <div class="advert">
            <img src="//static.cnodejs.org/Fn4D6BhOTz1IswvmzeZ1q7QW1ls_" alt />
          </div>
          <div class="advert">
            <img src="//static.cnodejs.org/FlajCCXkxZaOsuWp3k0iaiqfrJaS" alt />
          </div>
        </div>
        <!-- <div class="talkClass">
          <div class="main-title">还没人回复的话题</div>
          <ul class="Rside">
            <li>一个基于 Node.js vm 实现的个人 serverless 服务</li>
            <li>一个基于 Node.js vm 实现的个人 serverless 服务</li>
            <li>一个基于 Node.js vm 实现的个人 serverless 服务</li>
            <li>一个基于 Node.js vm 实现的个人 serverless 服务</li>
            <li>一个基于 Node.js vm 实现的个人 serverless 服务</li>
            <li>一个基于 Node.js vm 实现的个人 serverless 服务</li>
            <li>一个基于 Node.js vm 实现的个人 serverless 服务</li>
            <li>一个基于 Node.js vm 实现的个人 serverless 服务</li>
          </ul>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { handleTime } from "../common/time";
export default {
  data() {
    return {
      // 帖子数据
      blogList: [],
      // 默认显示第几页
      currentPage: 1,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount: 1,
      // 默认每页显示的条数（可修改）
      PageSize: 20,
      classles: ["全部", "分享", "精华", "问答", "测试"],
      linkFlag: 0,
      user: {}
    };
  },
  mounted() {
    // if (this.isLogin) {
    //   for (const key in window.sessionStorage) {
    //     if (window.sessionStorage.hasOwnProperty(key)) {
    //       if (key == "length"||key=='token') continue;
    //       const element = window.sessionStorage[key];
    //       this.user[key]=element
    //     }
    //   }
    // }
  },
  created() {
    this._getBlogList();
  },
  methods: {
    // 拿所有帖子
    async _getBlogList(tuid, tsid, key) {
      this.blogList.length = 0;
      let url = "public/all";

      if (tsid) url += `?tsid=${tsid}`;
      else if (tuid) url += `?tuid=${tuid}`;
      else if (key) url += `?keyword=${key}`;
      else url = "public/all";

      const res = await this.$http.get(url);
      console.log(res);

      if (res.errno !== 0) {
        return;
      }
      if (res.errno == 0) {
        this.blogList = res.data;

        this.blogList.forEach((item, index) => {
          item.TLastReplayTime = handleTime(item.TLastReplayTime);
        });
        this.totalCount = this.blogList.length;
      }
    },
    // 分页
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage = val;
    },
    checkClassles(index) {
      this.linkFlag = index;
      if (index == 0) {
        this._getBlogList();
        return;
      }
      this._getBlogList("", index);
    }
  },
  computed: {
    // isLogin() {
    //   return sessionStorage.getItem("uname") ? true : false;
    // }
  }
};
</script>

<style lang='scss' >

.index-wrap {
  display: flex;
  .main {
    position: relative;
    flex: 1;
    min-height: 200px;
    background: white;
    margin-right: 15px;
    box-sizing: border-box;
    padding-bottom: 45px;
    .main-title {
      display: flex;
      justify-content: flex-start;
      background-color: #eeeeee;
      width: 100%;
      li {
        padding: 10px;
        border-radius: 3px 3px 0 0;
        box-sizing: border-box;
        cursor: pointer;
        font-size: 16px;
        color: #80bd01;
        span {
          display: inline-block;
          box-sizing: border-box;
          padding: 3px;
          border-radius: 3px;
        }
      }
      .linkActive {
        background-color: #9acd32;
        color: white;
      }
    }
    .mainItem-wrap {
      height: 1000px;
      .main-item {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        height: 50px;
        padding: 10px 5px;
        border-bottom: 1px solid #eeeeee;

        img {
          width: 100%;
          height: 100%;
          border-radius: 4px;
        }
        .status {
          width: 60px;
          display: inline-block;
          height: 30px;
          line-height: 30px;
          text-align: center;
          font-size: 10px;
          color: #b4b4b4;
          .status-reply {
            color: #9e78c0;
            font-size: 14px;
          }
          .status-center {
            margin: 0 -1px;
            font-size: 10px;
          }
        }
        .img {
          width: 30px;
          height: 30px;
        }
        .classBtn {
          width: 30px;
          text-align: center;
          border-radius: 3px;
          margin-right: 2px;
          color: #999999;
          background-color: #e5e5e5;
        }
        .classesBtn {
          background-color: #9acd32;
          color: white;
        }
        .topicTitle {
          text-decoration: none;
          font-weight: normal;
          color: #505050;
          &:visited {
            color: #888;
          }
          &:hover {
            text-decoration: underline;
          }
        }
        .img-mini {
          margin-left: auto;
          width: 19px;
          height: 19px;
        }
        .time {
          display: inline-block;
          width: 60px;
          text-align: right;
          font-size: 11px;
          margin-right: 5px;
        }
      }
    }

    .el-pagination {
      position: absolute;
      bottom: 5px;
      left: 10px;
    }
  }
  .right-side {
    width: 290px;
    .main-title {
      background-color: #eeeeee;
      padding: 10px;
      border-radius: 3px 3px 0 0;
      box-sizing: border-box;
      font-size: 16px;
    }
    .Rside {
      margin-bottom: 15px;
      background-color: white;
      width: 100%;
      border-radius: 5px;
      padding: 10px;
      box-sizing: border-box;
      padding: 10px;
    }
    .user-info {
      .right-user {
        box-sizing: border-box;
        padding: 10px;
        .userInfo {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .img {
            margin-right: 10px;
            width: 48px;
            height: 48px;
            background-color: violet;
            img{
              width: 100%;
              height: 100%;
            }
          }
        }
        .score {
          margin: 15px 0 5px 0;
        }
      }
    }
    .sendBtn-wrap {
      width: 100%;
      display: flex;
      box-sizing: border-box;
      padding: 10px;
      background-color: white;
      margin-bottom: 15px;
      .btn {
        text-align: center;
        line-height: 34px;
        font-size: 14px;
        color: white;
        width: 80px;
        height: 34px;
        background-color: yellowgreen;
        cursor: pointer;
      }
    }
    .advisement {
      .advert {
        width: 270px;
        height: 65px;
        background: violet;
        margin-bottom: 10px;
        img {
          width: 100%;
          height: 100%;
          cursor: pointer;
        }
      }
    }
    .talkClass {
      width: 100%;
      ul {
        border-radius: 0;
        li {
          margin: 10px 3px;
        }
      }
    }
  }
}
</style>